<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title>创客界的一根葱视频案例预览</title>

  <link rel="shortcut icon" href="logo-small.png" type="image/x-icon">

  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <h1>创客界的一根葱 <br> 视频案例预览 <br> 简单版目录（后期再优化显示样式）</h1>

  <div class="list-box">
    <div class="box">
      <h2>HTML+CSS</h2>

      <ul>
        <li><a href="./前端分享/HTML+CSS/1-肥皂泡泡(HTML+CSS)/index.html">1 - 肥皂泡泡（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/2-简单下雨动画(HTML+CSS)/index.html">2 - 简单下雨动画（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/3-旋转方块动画(HTML+CSS)/index.html">3 - 旋转方块动画（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/4-渐变光条(HTML+CSS)/index.html">4 - 渐变光条（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/5-来个月饼(HTML+CSS)/index.html">5 - 来个月饼（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/6-大红灯笼(HTML+CSS)/index.html">6 - 大红灯笼（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/7-急速出租(HTML+CSS)/index.html">7 - 急速出租（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/8-发光方块(HTML+CSS)/index.html">8 - 发光方块（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/9-3D旋转文字(HTML+CSS)/index.html">9 - 3D旋转文字（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/10-翻盖开关(HTML+CSS)/index.html">10 - 翻盖开关（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/11-记得三连(HTML+CSS)/index.html">11 - 记得三连（HTML+CSS）</a></li>
        <li><a href="./前端分享/HTML+CSS/12-这是个按钮(HTML+CSS)/index.html">12 - 这是个按钮 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/13-闪光按钮(HTML+CSS)/index.html">13 - 闪光按钮 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/14-骨折文字(HTML+CSS)/index.html">14 - 骨折文字 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/15-3D计数器(HTML+CSS)/index.html">15 - 3D计数器 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/16-国庆快乐(HTML+CSS)/index.html">16 - 国庆快乐 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/17-3D翻转按钮(HTML+CSS)/index.html">17 - 3D翻转按钮 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/18-新拟态加载(HTML+CSS)/index.html">18 - 新拟态加载 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/19-圆形渐变加载(HTML+CSS)/index.html">19 - 圆形渐变加载 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/20-视觉暂留(HTML+CSS)/index.html">20 - 视觉暂留 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/21-粘黏牛奶(HTML+CSS)/index.html">21 - 粘黏牛奶 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/22-拟态开关(HTML+CSS)/index.html">22 - 拟态开关 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/23-花样描边文字(HTML+CSS)/index.html">23 - 花样描边文字 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/24-别盯着看(HTML+CSS)/index.html">24 - 别盯着看 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/25-拟真开关(HTML+CSS)/index.html">25 - 拟真开关 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/26-流水灯边框(HTML+CSS)/index.html">26 - 流水灯边框 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/27-赛博朋克按钮(HTML+CSS)/index.html">27 - 赛博朋克按钮 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/28-立体文字(HTML+CSS)/index.html">28 - 立体文字 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/29-东倒西歪按钮(HTML+CSS)/index.html">29 - 东倒西歪按钮 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/30-仿战网加载(HTML+CSS)/index.html">30 - 仿战网加载 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/31-心形开关(HTML+CSS)/index.html">31 - 心形开关 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/32-下雪了(HTML+CSS)/index.html">32 - 下雪了 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/33-滚雪球加载(HTML+CSS)/index.html">33 - 滚雪球加载 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/34-仿GPT-4线条(HTML+CSS)/index.html">34 - 仿GPT-4线条 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/35-简约开关(HTML+CSS)/index.html">35 - 简约开关 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/36-渐变文字背景(HTML+CSS)/index.html">36 - 渐变文字背景 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/37-拆分图文卡片(HTML+CSS)/index.html">37 - 拆分图文卡片 (HTML+CSS)</a></li>
        <li><a href="./前端分享/HTML+CSS/38-延伸边框按钮(HTML+CSS)/index.html">38 - 延伸边框按钮 (HTML+CSS)</a></li>
      </ul>
    </div>

    <div class="box">
      <h2>HTML+CSS+JS</h2>

      <ul>
        <li><a href="./前端分享/HTML+CSS+JS/1-盯着你(HTML+CSS+JS)/index.html">1 - 盯着你 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/2-按钮水波纹(HTML+CSS+JS)/index.html">2 - 按钮水波纹 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/3-环形旋转文字(HTML+CSS+JS)/index.html">3 - 环形旋转文字 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/4-瞄准目标(HTML+CSS+JS)/index.html">4 - 瞄准目标 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/5-左右为难(HTML+CSS+JS)/index.html">5 - 左右为难 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/6-聚光灯文字(HTML+CSS+JS)/index.html">6 - 聚光灯文字 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/7-悬停发光卡片(HTML+CSS+JS)/index.html">7 - 悬停发光卡片 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/8-LED时钟(HTML+CSS+JS)/index.html">8 - LED时钟 (HTML+CSS+JS)</a></li>
        <li><a href="./前端分享/HTML+CSS+JS/9-小横线菜单(HTML+CSS+JS)/index.html">9 - 小横线菜单 (HTML+CSS+JS)</a></li>
      </ul>
    </div>

    <div class="box">
      <h2>特殊案例</h2>

      <ul>
        <li><a href="./前端分享/特殊案例/激动的心-爱心代码(JavaScript版)/index.html?t=">激动的心 - 爱心代码 (JavaScript版)</a></li>
        <li><a href="./前端分享/特殊案例/音乐圣诞树(JavaScript版)/index.html?t=">音乐圣诞树 (JavaScript版)</a></li>
        <li><a href="./前端分享/特殊案例/3Dlogo(three.js)/index.html">3D logo (three.js)</a></li>
      </ul>
    </div>

    <div class="beian">
      <div>
        <a href="https://beian.miit.gov.cn/" target="_blank">黔ICP备20000962号-3</a>
      </div>
      <div>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=52010202003408">
          <p>贵公网安备 52010202003408号</p>
        </a>
      </div>
    </div>
  </div>

</body>

</html>